<template>
  <div class="execution">
    <basic-container>
      <div class="search-box">
        <el-form ref="searchForm" :inline="true" :model="searchForm">

          <el-form-item label="项目名称" prop="sysCode">
            <el-select v-model="searchForm.systemCode" @change="getGroupListBySysCode" placeholder="接入项目名称">
              <el-option v-for="item in sysList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="接入服务" prop="groupCode">
            <el-select v-model="searchForm.groupCode" placeholder="接入服务">
              <el-option v-for="item in groupList" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="交易码" prop="transCode">
            <el-input v-model="searchForm.transCode" placeholder="交易码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchChangeSelf">搜 索</el-button>
            <el-button type="default" icon="el-icon-delete" @click="searchReset">清 空</el-button>
          </el-form-item>

        </el-form>
      </div>

      <avue-crud
        ref="crud"
        :option="option"
        :data="tableList"
        :table-loading="tableLoading"
        :page="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-reset="searchReset"
      >
        <template slot="menuLeft">
          <el-button v-if="permissionBtn.pre_process_add" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button v-if="permissionBtn.pre_process_edit" type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.row, scope.index)">查看详情</el-button>
          <el-button v-if="permissionBtn.pre_process_del" type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row, scope.index)">删除</el-button>
          <el-button v-if="permissionBtn.pre_process_copy" type="text" size="small" icon="el-icon-document-copy" @click="handleCopy(scope.row, scope.index)">复制</el-button>
        </template>
      </avue-crud>

      <!-- 详情 -->
      <Detail :visible.sync="visible" :searchData="searchData" @update="refreshChange"></Detail>

      <!-- 复制 -->
      <el-dialog title="流程配置复制" :visible.sync="dialogVisible" width="50%" @close="dialogClosed">
        <el-form ref="copyForm" :model="copyForm" labelWidth="100px">
          <el-form-item label="项目名称" prop="systemName"><el-input v-model="copyForm.sysName" disabled></el-input><el-input v-model="copyForm.systemCode" v-if="false"></el-input></el-form-item>
          <el-form-item label="接入服务名称" prop="groupName"><el-input v-model="copyForm.groupName" disabled></el-input><el-input v-model="copyForm.groupCode" v-if="false"></el-input></el-form-item>
          <el-form-item
            v-for="(code, index) in copyForm.transCodes"
            :label="`交易码${index || ''}`"
            :prop="`transCodes.${index}`"
            :key="index"
            :rules="[{ required: true, message: '交易码不能为空' }]"
          >
            <el-input v-model="copyForm.transCodes[index]" :style="{ width: '50%', marginRight: '20px' }"></el-input>
            <el-button type="danger" icon="el-icon-minus" circle v-if="index !== 0" @click="delCode(code, index)"></el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="success" icon="el-icon-plus" @click="createCode">新建</el-button>
          <el-button type="primary" icon="el-icon-collection" @click="save">保存</el-button>
          <el-button icon="el-icon-delete" @click="dialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import { fetchList, putObj, delObj, copy, checkTransCode } from '@/api/pre/process'
import {getSysList} from '@/api/pre/insystem'
import {getGroupList, getGroupListBySysCode} from '@/api/pre/group'
import { option } from '@/const/crud/pre/process'
import { mapGetters } from 'vuex'
import Detail from './detail'
export default {
  name: 'Process',
  components: {
    Detail
  },
  data() {
    return {
      option,
      tableList: [],
      tableLoading: false,
      searchForm: {
        sysCode: '',
        groupCode: '',
        transCode: '',
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 20
      },

      visible: false,
      searchData: {},

      dialogVisible: false,
      copyForm: {},

      sysList: [],
      groupList: [],
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionBtn() {
      return {
        pre_process_edit: this.permissions['pre_process_edit'],
        pre_process_add: this.permissions['pre_process_add'],
        pre_process_del: this.permissions['pre_process_del'],
        pre_process_copy: this.permissions['pre_process_copy']
      }
    }
  },
  created() {
    this.getSysList()
  },

  methods: {
    getSysList() {
      getSysList().then(res => {
        this.sysList = res.data.data
      })
    },
    getGroupListBySysCode(value) {
      return getGroupListBySysCode(value).then(res => {
        this.searchForm.groupCode = ''
        this.groupList = []
        this.groupList = res.data.data
        if (this.groupList.length && !this.searchForm.groupCode) {
          this.searchForm.group = this.groupList[0].groupCode
        }
        for (var i = 0; i < this.sysList.length; i++) {
          if (this.sysList[i].code == this.searchForm.systemCode) {
            // this.searchForm.sysName = this.sysList[i].name
          }
        }
      })
    },
    getList(page, params) {
      this.tableLoading = true
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      ).then(response => {
        this.tableList = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },
    searchChange(param, done) {
      this.searchForm = param
      this.page.currentPage = 1
      this.getList(this.page, param)
      done()
    },
    searchChangeSelf(){
      this.page.currentPage = 1
      this.getList(this.page, this.searchForm)
    },
    searchReset() {
      this.searchForm = {
        sysCode: '',
        groupCode: '',
        transCode: '',
      }
      this.page.currentPage = 1
      this.getList(this.page)
    },
    handleAdd() {
      this.visible = true
      this.searchData = {}
    },
    //查看详情
    handleEdit(row, index) {
      this.visible = true
      this.searchData.sysCode = row.systemCode
      this.searchData.groupCode = row.groupCode
      this.searchData.transCode = row.transCode
      this.searchData.flowId = row.flowId
    },
    //复制
    handleCopy(row, index) {
      this.dialogVisible = true
      this.copyForm = {
        sysName: row.sysName,
        groupName: row.groupName,
        systemCode: row.systemCode,
        groupCode: row.groupCode,
        flowId: row.flowId,
        transCodes: ['']
      }
    },
    //删除
    handleDelete: function(row, index) {
      this.$confirm('是否确认删除' + row.sysName + '的流程配置？', '提示', {
        type: 'warning'
      })
        .then(() => {
          return delObj(row.flowId)
        })
        .then(res => {
          this.$message.success('删除成功')
          this.refreshChange()
        })
        .catch(() => {})
    },

    getTodoById: function(state) {
      function f(id) {
        return state.todos.find(todo => todo.id === id)
      }
    },
    dialogClosed() {
      this.$refs.copyForm.resetFields()
    },
    createCode() {
      this.copyForm.transCodes.push('')
    },
    delCode(code, index) {
      this.copyForm.transCodes.splice(index, 1)
    },
    save() {
      this.$refs.copyForm.validate(valid => {
        if (!valid) {
          return
        }
        checkTransCode(this.copyForm).then(res => {
          if (res.status == 200) {
            copy(this.copyForm).then(copyres => {
              this.$message.success('流程保存成功')
              this.dialogVisible = false
              this.refreshChange()
              this.$refs.copyForm.resetFields()
            })
          }
        })
      })
    }
  }
}
</script>
